<template>
  <div>默认的 count: {{ state.count }}</div>
  <button @click="increment">增加</button>

  <h1>{{ msg.age }}</h1>
  <button @click="update">修改</button>
</template>

<script setup lang="ts">
import { reactive,computed, defineProps,watchEffect, defineEmits } from 'vue'

type DState = {
  count: number,
  double: number
}

defineProps ({
  msg: Object
})

const state: DState = reactive({
  count: 0,
  double: computed(() => state.count + 2 )
})

function increment() {
  state.count++;
}

const emit = defineEmits(["changeValue"])
const update = ()  => {
  console.log('更新');
  emit('changeValue')
}

watchEffect(() => {
  console.log("count调用之前的值",state.count)
})

</script>

<style scoped>
a {
  color: #42b983;
}
</style>
